<template>
  <div id="userLoginPage">
    <h2 class="title">用户登陆</h2>
    <h3 class="desc">基于DeepSeek的新能源制氢问答系统</h3>
    <a-form :model="userLoginForm" name="basic" autocomplete="off">
      <a-form-item
        name="account"
        :rules="[{ required: true, message: '请输入账号！' }]"
      >
        <a-input
          v-model:value="userLoginForm.account"
          placeholder="请输入账号"
        />
      </a-form-item>

      <a-form-item
        name="password"
        :rules="[
          { required: true, message: '请输入密码！' },
          { min: 8, message: '密码长度不能小于八位' },
        ]"
      >
        <a-input-password
          v-model:value="userLoginForm.password"
          placeholder="请输入密码"
        />
      </a-form-item>

      <div class="tips">
        没有账号？
        <router-link to="/user/register">立即注册</router-link>
      </div>

      <a-form-item>
        <a-button
          type="primary"
          html-type="submit"
          style="width: 100%"
          @click="handleSubmit()"
        >
          登 陆
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { useAuthStore } from "@/stores/LoginUserStore.js";
import axios from "axios";
import {message} from "ant-design-vue";

const authStore = useAuthStore();
const router = useRouter();
const userLoginForm = ref({
  account: "",
  password: "",
});

const handleSubmit = async () => {
  axios({
    method: 'post',
    url: 'http://localhost:8080/api/user/login',
    data: {
      account: userLoginForm.value.account,
      password: userLoginForm.value.password
    }
  }).then(res=>{
    if (res.data.code === 0 ||res.data.data){
      message.success("登陆成功")
      authStore.loginSuccess(res.data.data)
      router.push({
        path:'/',
        replace:true
      })
    }else {
      message.error("登陆失败"+res.data.message)
    }
  })
};
</script>

<style scoped>
#userLoginPage {
  max-width: 360px;
  margin: 0 auto;
}

.title {
  margin-top: 100px;
  text-align: center;
  margin-bottom: 16px;
}

.desc {
  text-align: center;
  margin-bottom: 16px;
  color: #bbb;
}

.tips {
  color: #bbb;
  text-align: right;
  font-size: 12px;
}
</style>
